<template>

  <div>

    <div class="div1" style="border-radius: 10px;">
      <div class="big_title_style">
        <span class="span1">统计数据</span>
        <span class="span2" v-if="allData">统计时间（{{currentTime}}）</span>
        <span class="span2" v-if="!allData">统计时间（{{startTime}}至{{endTime}}）</span>

      </div>
      <!-- <el-col :span="6"> -->
        <div>
          <el-button :class="defaultButton == 4 ? 'button-sku-blue':''"  size="mini" @click="week()">近七天</el-button>
          <el-button :class="defaultButton == 3 ? 'button-sku-blue':''"  size="mini " @click="month()">近一月</el-button>
          <el-button :class="defaultButton == 2 ? 'button-sku-blue':''"  size="mini " @click="trimester()">近三月</el-button>
          <el-button :class="defaultButton == 1 ? 'button-sku-blue':''"  size="mini" @click="all()">全部</el-button>
        </div>
      <!-- </el-col> -->

    </div>

    <el-form class="formList" :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="80px"
             @keyup.enter.native="handleQuery">
      <el-row>
        <el-form-item label="商品分类" prop="categoryUid">
          <el-cascader v-model="queryParams.categoryUid" :options="categoryOptions" clearable filterable
                       class="input-rule">
          </el-cascader>
        </el-form-item>

        <el-form-item label="商品名称" prop="productName">
          <el-input v-model="queryParams.productName" placeholder="请输入商品名称" clearable size="small" class="input-rule"/>
        </el-form-item>

        <el-form-item style="margin-left: 30px;">
          <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
          <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
        </el-form-item>

      </el-row>
    </el-form>

    <div class="divTable">
      <el-table v-loading="loading" :data="infoList" border>
        <el-table-column label="商品图片"
                         align="center"
                         :show-overflow-tooltip="true"
                         prop="carouselImg"
                         width="110px"
        >
          <template slot-scope="scope">
            <el-image v-if="scope.row.carouselImg != null && scope.row.carouselImg != '' " slot="reference"
                      :src="scope.row.carouselImg"
                      class="image-rows" style="width: 80px; height: 80px;" :preview-src-list="[scope.row.carouselImg]"></el-image>
          </template>
        </el-table-column>
        <el-table-column label="商品信息" align="productName" prop="productName" min-width="300px"/>
        <el-table-column label="商品访客数" align="visitorsSum" prop="visitorsSum"/>
        <el-table-column label="商品浏览量" align="viewNumSum" prop="viewNumSum"/>
        <el-table-column label="添加购物车量" align="addCarNumSum" prop="addCarNumSum"/>
        <el-table-column label="支付订单数" align="buyNumSum" prop="buyNumSum"/>
        <el-table-column label="支付转化率(%)" align="paymentConversionRateSum" prop="paymentConversionRateSum"/>
        <el-table-column label="复购率(%)" align="repurchaseRateSum" prop="repurchaseRateSum"/>
      </el-table>



      <pagination
        v-show="total > 0"
        :total="total"
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
        @pagination="getList"
      />


    </div>
  </div>
</template>


<script>
  import productNewestData from '@/views/dataCentre/productDataDetail/productSituation/productNewestData';
  import productNewestMap from '@/views/dataCentre/productDataDetail/productSituation/productNewestMap';
  import {
    selectOptions
  } from "@/api/product/category";
  import {
    getProductDataDetail
  } from "@/api/dataCentre/productCount";

  export default {
    //import 引入的组件需要注入到对象中才能使用
    components: {productNewestData, productNewestMap},
    props: {},
    data() {
      //这里存数据
      return {
          // 总条数
          total: 0,
        //默认按钮
        defaultButton:1,
        //未指定日期查全部数据
        allData: true,
        //商品详细数据列表
        infoList: [],
        // 遮罩层
        loading: true,
        //结束日期
        endTime: '',
        //开始日期
        startTime: '',
        //当前时间
        currentTime: '',
        // 商品类别
        categoryOptions: [],
        // 显示搜索条件
        showSearch: true,
        // 查询参数
        queryParams: {
          pageNum: 1,
          pageSize: 10,
          productName: null,
          categoryUidOne: null,
          categoryUidTwo: null,
          startTime: null,
          endTime: null,
          categoryUidThree: null,
          timeArray: []
        },
        //当前时间
        currentTime: ''
      };
    },
    //计算属性
    computed: {},
    //监控data中数据变化
    watch: {},
    //方法
    methods: {

      /** 搜索按钮操作 */
      handleQuery() {
        this.queryParams.pageNum = 1;
        this.getList();
      },
      /** 重置按钮操作 */
      resetQuery() {
        this.resetForm("queryForm");
        this.handleQuery();
        this.clearClassify()
      },

      week() {
        this.defaultButton = 4
        const end = new Date();
        const start = new Date();
        start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
        this.queryParams.endTime = end.getFullYear() + '-' + (end.getMonth() + 1) + '-' + end.getDate()
        this.queryParams.startTime = start.getFullYear() + '-' + (start.getMonth() + 1) + '-' + start.getDate();

        this.startTime = start.getFullYear() + '-' + (start.getMonth() + 1) + '-' + start.getDate();
        this.endTime = end.getFullYear() + '-' + (end.getMonth() + 1) + '-' + end.getDate()

        this.allData = false
        this.getList()
      },
      month() {
        this.defaultButton = 3
        const end = new Date();
        const start = new Date();
        start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
        this.queryParams.endTime = end.getFullYear() + '-' + (end.getMonth() + 1) + '-' + end.getDate()
        this.queryParams.startTime = start.getFullYear() + '-' + (start.getMonth() + 1) + '-' + start.getDate();

        this.startTime = start.getFullYear() + '-' + (start.getMonth() + 1) + '-' + start.getDate();
        this.endTime = end.getFullYear() + '-' + (end.getMonth() + 1) + '-' + end.getDate()

        this.allData = false
        this.getList()
      },
      trimester() {
        this.defaultButton = 2
        const end = new Date();
        const start = new Date();
        start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
        this.queryParams.endTime = end.getFullYear() + '-' + (end.getMonth() + 1) + '-' + end.getDate()
        this.queryParams.startTime = start.getFullYear() + '-' + (start.getMonth() + 1) + '-' + start.getDate();
        this.startTime = start.getFullYear() + '-' + (start.getMonth() + 1) + '-' + start.getDate();
        this.endTime = end.getFullYear() + '-' + (end.getMonth() + 1) + '-' + end.getDate()

        this.allData = false
        this.getList()
      },
      all() {
        this.defaultButton = 1
        const date = new Date();
        this.queryParams.endTime = null
        this.queryParams.startTime = null
        this.currentTime = date.getFullYear() + '-' + (date.getMonth() + 1) + '-' + date.getDate()
        this.allData = true
        this.getList()
      },
      /** 查询商品数据详细 */
      getList() {
        this.loading = true;
        if (this.queryParams.categoryUid != null && this.queryParams.categoryUid.length > 0) {
          let uidArray = this.queryParams.categoryUid;
          this.queryParams.categoryUidOne = uidArray[0];
          if (uidArray.length > 1) {
            this.queryParams.categoryUidTwo = uidArray[1];
          }
          if (uidArray.length > 2) {
            this.queryParams.categoryUidThree = uidArray[2];
          }
        }
        getProductDataDetail(this.queryParams).then((response) => {
          this.infoList = response.rows
          this.loading = false
          this.queryParams.categoryUidThree = null
          this.queryParams.categoryUidTwo = null
          this.queryParams.categoryUidOne = null
            this.total = response.total
        })
      },
    },
    //声明周期 - 创建完成（可以访问当前this实例）
    created() {
      this.getList()
    },
    //生命周期 - 挂载完成（可以访问DOM元素）
    mounted() {
      this.all()
      selectOptions().then(response => {
        this.categoryOptions = response.data;
      });
    },
    beforeCreate() {
    },//生命周期 - 创建之前
    beforeMount() {
    },//生命周期 - 挂载之前
    beforeUpdate() {
    },//声明周期 - 更新之前
    updated() {
    },//生命周期 - 更新之后
    beforeDestroy() {
    },//生命周期 - 销毁之前
    destroyed() {
    },//生命周期 - 销毁之后
    activated() {
    },//缓存keep-alive
  }
</script>

<style scoped>

  .div1 {
    display: flex;
    align-content: center;
    justify-content: space-between;
    margin: 20px 0;
  }

  .first-title__title {
    font-size: 20px;
    font-weight: 500;
    color: #323234;
    margin-bottom: 30px;
  }

  .span1 {
    font-size: 16px;
    font: 600;
    margin-right: 10px;

  }

  .span2 {
    border: 1px;
    font-size: 14px;
    color: #606266;
    margin-top: 3px;
  }
  .button-sku-blue {
    color: #409eff;
    background: #ecf5ff;
    border-color: #b3d8ff;
  }
</style>
